{% extends "lxoa/layout.html" %}
{% block css %}

{% endblock %}
{% block content %}
<link rel="stylesheet" type="text/css" href="/static/lxoa/css/bootstrap-table.min.css" />
<style>
    .input-group {
        width: 100%;
    }

    .input-group-addon {
        width: 120px;
    }

    .selectpicker {
        width: 100%;
        /*height: 34px;*/
    }
</style>

<div class="panel-body" style="margin-top:8px;">
    <!-- Table -->
    <table id="table"></table>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">报销统计</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            building...
                        </div>
                    </div>

                </div>
                <div class="modal-footer" style="border:0px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                    <button type="button" class="btn btn-primary" id="submitbtn"> 提交 </button>
                </div>
            </div>
            <script>
                function delrow(obj) {
                    $(obj).parent().parent().remove();
                }
                function addrow() {
                    var str = '<tr data-index="0"><td style=""><select class="selectpicker" name="expense_type" data-style="btn-info"><option value="交通费">交通费</option><option value="住宿费">住宿费</option><option value="其他">其他</option></select></td><td style=""><input type="text" id="" name="txt_price" class="form-control" placeholder="请输入" onkeyup="validatetxt(this)" onblur="validatetxt(this);calctotalprice()" aria-describedby="basic-addon1"></td><td style=""><input type="text" id="" name="txt_description" class="form-control" placeholder="请输入" aria-describedby="basic-addon1"></td><td style=""><button type="button" onclick="delrow(this)" class="close" style="color:red;cursor:pointer;" data-dismiss="modal" aria-hidden="true">×</button></td></tr>';
                    $("#expense_items").append(str);
                }
                function validatetxt(obj) {
                    $(obj).val($(obj).val().replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, ''));
                }
                function calctotalprice() {
                    var item = $("input[name='txt_price']");
                    var total = 0;
                    for (var i = 0; i < item.length; i++) {
                        if ($(item[i]).val().length > 0 && !isNaN($(item[i]).val())) {
                            total += parseFloat($(item[i]).val());
                        }
                    }
                    $('#txt_total').val(total);
                }

            </script>


        </div>
    </div>

    <div class="modal fade" id="myModaltj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width:85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">请假统计</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 margin-top-8 pull-right" style="z-index:100">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">年份</span>
                                    <select class="selectpicker" name="vac_year" id="vac_year" onchange="sumyear(this)" data-style="btn-info">
                                        <option value="">All</option>
                                        <option value="2018">2018年</option>
                                        <option value="2019">2019年</option>
                                        <option value="2020">2020年</option>
                                        <option value="2021">2021年</option>
                                        <option value="2022">2022年</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 margin-top-8">
                                <div class="" style="height:500px" id="divchart">
                                    Loading...
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal"> 确定 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/lxoa/js/bootstrap.min.js"></script>
<script src="/static/lxoa/js/bootstrap-table.min.js"></script>
<!--<script src="/static/lxoa/js/bootstrap-table-locale-all.min.js"></script>-->

<script src="/static/lxoa/laydate/laydate.js"></script>
<script src="/static/lxoa/js/tablestatistics.js"></script>
<script src="/static/lxoa/js/echarts.min.js"></script>

{% endblock %}
